<template>
  <div class="person">
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.id }} --- {{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="Person">
import {type Persons} from '@/types/index'

// import {defineProps, withDefaults} from 'vue'

// 接受Props
// defineProps(['a'])

// 接受Props, 同时将Props保存起来
// let x = defineProps(['a', 'list'])

// 接受Props, 限制类型
// defineProps<{list:Persons}>()

// 接受Props, 限制类型 + 指定默认值
withDefaults(defineProps<{ list?: Persons }>(), {
  list: () => [
    {id:1, name:"李四1", age:23},
    {id:2, name:"李四2", age:24},
    {id:3, name:"李四3", age:25,},
  ]
})

</script>


<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>